import React, { useEffect, useState } from 'react';
import { Button, Flex, GetProps, List, Modal, Tag, Tooltip } from 'antd';
import { InfoCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { autoRc } from '@/utils/auto-render';
import { BetaSchemaForm } from '@ant-design/pro-form';
import { FormSchema } from '@ant-design/pro-form/es/components/SchemaForm/typing';

declare type ActiveType = 'search' | 'selected' | 'not-recommend';

declare type ModelType = GetProps<typeof Modal>

declare type DataSourceType = {
  hidden: boolean;
  description: React.ReactNode;
}

interface SuperExportProps extends ModelType {
  tip?: string;
  parameters?: any;
  selectedSize?: number;
}

const SuperExport: React.FC<SuperExportProps> = (props) => {
  const { title = '数据导出', tip, parameters, selectedSize = 0, open } = props;

  const [ active, setActive ] = useState<ActiveType>();
  const [ dataSource, setDataSource ] = useState<DataSourceType[]>([]);

  useEffect(() => {
    setActive(selectedSize > 0 ? 'selected' : 'search');
  }, [ selectedSize, open ]);

  useEffect(() => {
    setDataSource(
      [
        {
          description: <Flex justify="space-between">
            <Flex flex={ 1 }>
              <div>使用当前列表查询条件导出</div>
            </Flex>
            <Flex>
              <Tag.CheckableTag
                key="search" checked={ active === 'search' }
                onChange={ () => setActive('search') }
              >默认</Tag.CheckableTag>
            </Flex>
          </Flex>,
          hidden: false,
        },
        {
          description: <Flex justify="space-between">
            <Flex flex={ 1 }>
              <Flex gap="small">
                <div>将所有数据导出</div>
                <Tooltip title="存在大量数据时不建议选择此方式">
                  <QuestionCircleOutlined color={ '#1677ff' } />
                </Tooltip>
              </Flex>
            </Flex>
            <Flex>
              <Tag.CheckableTag
                key="not-recommend" checked={ active === 'not-recommend' }
                onChange={ () => setActive('not-recommend') }
              >不推荐</Tag.CheckableTag>
            </Flex>
          </Flex>,
          hidden: false,
        },
        {
          description: <Flex justify="space-between">
            <Flex flex={ 1 }>
              <div>将选中的 { autoRc.renderHighlightNumber(selectedSize) } 条数据导出</div>
            </Flex>
            <Flex>
              <Tag.CheckableTag
                key="selected" checked={ active === 'selected' }
                onChange={ () => setActive('selected') }
              >推荐</Tag.CheckableTag>
            </Flex>
          </Flex>,
          hidden: selectedSize === 0,
        },
      ],
    );
  }, [ parameters, selectedSize, active ]);

  return <Modal
    { ... props }
    title={ false }
    closeIcon={ false } maskClosable={ false }
    footer={
      (_, extra) => {
        const { CancelBtn } = extra;
        return <Flex justify="flex-end" gap="small">
          <CancelBtn />
          <Button type="primary">确定导出</Button>
        </Flex>;
      }
    }
  >
    <Flex>
      <Flex align="flex-start">
        <InfoCircleOutlined style={ { fontSize: 22, fontWeight: 600, paddingRight: 12 } } />
      </Flex>
      <Flex vertical flex={ 1 } gap="small">
        <Flex style={ { fontSize: 16, fontWeight: 600, lineHeight: 1.5 } }>
          { autoRc.renderTitle(title, tip) }
        </Flex>
        <List<DataSourceType>
          itemLayout="horizontal"
          dataSource={ dataSource }
          renderItem={
            (item, index) => {
              return <List.Item hidden={ item?.hidden }>
                <List.Item.Meta description={ item?.description } />
              </List.Item>;
            }
          }
        />
      </Flex>
    </Flex>
  </Modal>;
};

declare type RecordExportProps = FormSchema;

const RecordExport: React.FC<RecordExportProps> = (props) => {
  const [ active, setActive ] = useState<ActiveType>();

  return <BetaSchemaForm<any>
    { ... props }
    modalProps={{
      okText: '确定导出',
    }}
    columns={
      [
        {
          title: <Flex justify="flex-start" style={ { color: 'rgba(0, 0, 0, 0.45)' } }>使用当前列表查询条件导出</Flex>,
          renderFormItem: () => <Flex justify="flex-end">
            <Tag.CheckableTag
              key="search" checked={ active === 'search' }
              onChange={ () => setActive('search') }
            >默认</Tag.CheckableTag>
          </Flex>,
          formItemProps: { colon: false, style: { margin: 0, padding: '8px 0', borderBottom: '1px solid #f0f0f0' } },
        },
        {
          title: <Flex justify="flex-start" gap="small" style={ { color: 'rgba(0, 0, 0, 0.45)' } }>
            <Flex>将所有数据导出</Flex>
            <Tooltip title="存在大量数据时不建议选择此方式">
              <QuestionCircleOutlined color={ '#1677ff' } />
            </Tooltip>
          </Flex>,
          renderFormItem: () => <Flex justify="flex-end">
            <Tag.CheckableTag
              key="not-recommend" checked={ active === 'not-recommend' }
              onChange={ () => setActive('not-recommend') }
            >不推荐</Tag.CheckableTag>
          </Flex>,
          formItemProps: { colon: false, style: { margin: 0, padding: '8px 0', borderBottom: '1px solid #f0f0f0' } },
        },
        {
          title: <Flex justify="flex-start" style={ { color: 'rgba(0, 0, 0, 0.45)' } }>将选中的 1 条数据导出</Flex>,
          renderFormItem: () => <Flex justify="flex-end">
            <Tag.CheckableTag
              key="selected" checked={ active === 'selected' }
              onChange={ () => setActive('selected') }
            >推荐</Tag.CheckableTag>
          </Flex>,
          formItemProps: { colon: false, style: { margin: 0, padding: '8px 0', borderBottom: '1px solid #f0f0f0' } },
        },
      ]
    }
  />;
};

export {
  SuperExportProps,
  SuperExport,
  RecordExportProps, RecordExport,
};